Vuetify 2.2.5でダークテーマがより黒くなったのを元に戻すためのSCSSの書き換え
やりたいこと
個人的にマットな感じの前のダークテーマが好みでVuetifyを気に入っていたところがあるのでVuetify 2.2.5でも以前のダークテーマの色になるようにSCSSを書き換えたい。 すこしドキュメントが間違っているところもあったり、ハマりどころがあった。割と簡単な変更だけで適用できる。
やりかた
ありがたいことに@KaelWDさんからレビューが届き提案を色々と受け取ってもっとシンプルになった。 全部まとめた実際の差分は以下になる。
やるべきことはsrc/styles/variables.scssを以下の内容で作るだけ。
code:src/styles/variables.scss
@import '~vuetify/src/styles/settings/_colors.scss';
@import '~vuetify/src/styles/settings/_light.scss';
// NOTE: map-deep-merge() is gone.
$material-dark: (
'status-bar': (
'regular': map-get($shades, 'black'),
'lights-out': rgba(map-get($shades, 'black'), 0.2)
),
'app-bar': map-get($grey, 'darken-4'),
'calendar': (
'line-color': map-get($grey, 'base'),
'interval-color': map-get($grey, 'lighten-3'),
'interval-line-color': map-get($grey, 'darken-2'),
'text-color': map-get($shades, 'white'),
'past-color': rgba(map-get($shades, 'white'), .50)
),
'cards': map-get($grey, 'darken-3'),
'dividers': rgba(map-get($shades, 'white'), 0.12),
'text': (
'theme': map-get($shades, 'white'),
'primary': map-get($shades, 'white'),
'secondary': rgba(map-get($shades, 'white'), 0.7),
'disabled': rgba(map-get($shades, 'white'), 0.5),
'link': map-get($blue, 'accent-1'),
'link-hover': map-get($grey, 'lighten-3')
),
'icons': (
'active': map-get($shades, 'white'),
'inactive': rgba(map-get($shades, 'white'), 0.5)
),
'inputs': (
'box': map-get($shades, 'white'),
'solo-inverted': rgba(map-get($shades, 'white'), 0.16),
'solo-inverted-focused': map-get($shades, 'white'),
'solo-inverted-focused-text': map-get(map-get($material-light, 'text'), 'primary')
),
'buttons': (
'disabled': rgba(map-get($shades, 'white'), 0.3),
'focused': rgba(map-get($shades, 'white'), 0.12),
'focused-alt': rgba(map-get($shades, 'white'), 0.1),
'pressed': rgba(#ccc, 0.25)
),
'expansion-panels': (
),
'selection-controls': (
'thumb': (
'inactive': map-get($grey, 'lighten-1'),
'disabled': map-get($grey, 'darken-3')
),
'track': (
'inactive': rgba(map-get($shades, 'white'), 0.3),
'disabled': rgba(map-get($shades, 'white'), 0.1)
)
),
'slider': (
'active': rgba(map-get($shades, 'white'), 0.3),
'inactive': rgba(map-get($shades, 'white'), 0.2),
'disabled': rgba(map-get($shades, 'white'), 0.2),
'discrete': map-get($shades, 'white')
),
'skeleton': linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent),
'states': (
'hover': 0.08,
'focus': 0.24,
'selected': 0.16,
'activated': 0.24,
'pressed': 0.32,
'dragged': 0.16
),
'tabs': rgba(map-get($shades, 'white'), 0.6),
'toggle-buttons': (
'color': map-get($shades, 'white')
),
'text-fields': (
'filled': rgba(map-get($shades, 'black'), 0.1),
'filled-hover': rgba(map-get($shades, 'black'), 0.2)
),
'input-bottom-line': rgba(map-get($shades, 'white'), 0.7),
'stepper': (
'active': rgba(map-get($shades, 'white'), 1),
'completed': rgba(map-get($shades, 'white'), 0.87),
'hover': rgba(map-get($shades, 'white'), 0.75)
),
'table': (
'hover': map-get($grey, 'darken-2'),
'group': map-get($grey, 'darken-2')
),
'picker': (
'body': map-get($grey, 'darken-3'),
'clock': map-get($grey, 'darken-2'),
'indeterminateTime': map-get($grey, 'darken-1'),
'title': map-get($grey, 'darken-2')
),
'color-picker': (
'checkerboard': rgba(map-get($shades, 'white'), 0.12)
),
'fg-color': map-get($shades, 'white'),
'text-color': map-get($shades, 'white'),
'primary-text-percent': 1,
'secondary-text-percent': 0.7,
'disabledORhints-text-percent': 0.5,
'divider-percent': 0.12,
'active-icon-percent': 1,
'inactive-icon-percent': 0.5
)
map-deep-merge()をつけたりしてうまく行かずはまっていた。上記をコピーするだけでよい。
おまけ
上記の.scssはをベースに作ったものになっている。2.1.8のVuetifyのダークテーマになっている。 ただで全部取り込まず局所的に書けばマージされるという情報も得たのでそれをする方が良いかもしれない。まだSCSSの知識もないので、こんごのVuetifyのアップデートで一部部分の色がおかしくなったりときに原因を探すのが大変になりそうな気がするからとりあえず全部コピーしておいた。（新しいプロパティが増えたときは上書きはできないだろうが） 一応、以下のRSSを購読して今後のアップデートで_dark.scssに変更があったことを知れるようにしている。 https://github.com/vuetifyjs/vuetify/commits/master/packages/vuetify/src/styles/settings/_dark.scss.atom
こんごのMaterial Designのアップデートによっては好みのダークモードに戻って上記がいらなくなることもあるかもしれない。そのときに上記を適用したままだと変更に気づけないのでそういうときのためにもなると思ってる。